<!doctype html>

<html lang="en" ng-app="Robot">
<head>
  <meta charset="utf-8">

  <title>GAPID Robot</title>
  <meta name="description" content="Gapid robot dashboard server">
  <meta name="author" content="Google">

  <link rel="stylesheet" href="css/styles.css?v=1.0">
  <link rel="icon" type="image/png" href="favicon.png" />

  <!-- Angular Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>

  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
  <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.css" rel="stylesheet">

  <!-- Chartjs Dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

  <!-- Angular Chart Dependencies -->
  <script src="http://cdn.jsdelivr.net/angular.chartjs/0.8.8/angular-chart.min.js"></script>
  <link href="http://cdn.jsdelivr.net/angular.chartjs/0.8.8/angular-chart.min.css" rel="stylesheet">

  <!-- Angular Websocket Dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-websocket/1.0.14/angular-websocket.min.js"></script>

  <!-- Icons font -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Protocol buffers -->

  <!-- Components -->
  <script src="components/components.js"></script>
  <script src="components/gapid-artifacts.js"></script>
  <script src="components/gapid-packages.js"></script>
  <script src="components/gapid-satellites.js"></script>
  <script src="components/gapid-subjects.js"></script>
  <script src="components/gapid-tracks.js"></script>
  <script src="components/gapid-workers.js"></script>

  <!-- Directives -->
  <script src="directives/directives.js"></script>

  <!-- Services -->
  <script src="services/services.js"></script>
  <script src="services/gapid-selection.js"></script>
</head>

<body ng-controller="AppController as vm">
  <style>
    body {
      background-color: #46536c;
    }

    .gapid-background {
      background-color: #46536c;
    }

    md-content {
      background-color: transparent;
    }

    md-tab-item {
      background-color: #f4f4f4;
      color: white;
    }

    md-card {
      background-color: #f8f8f8;
      color: #5d5d5d;
    }

    md-tooltip .md-content {
      /* Allow multi-line tooltips */
      height: auto;
    }

    .gapid-icon {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }
  </style>

  <div ng-cloak class="gapid-background">
    <md-content>
      <md-button href="/grid.html" class="md-accent md-raised">View trace status grid</md-button>
      <md-tabs md-selected="selectedTab" md-dynamic-height md-border-bottom>
        <md-tab label="Tracks">
          <md-content class="md-padding">
            <gapid-tracks></gapid-tracks>
          </md-content>
        </md-tab>
        <md-tab label="Subjects">
          <md-content class="md-padding">
            <gapid-subjects></gapid-subjects>
          </md-content>
        </md-tab>
        <md-tab label="Satellites">
          <md-content class="md-padding">
            <gapid-satellites></gapid-satellites>
          </md-content>
        </md-tab>
      </md-tabs>
    </md-content>
  </div>

  <script>
    var app = angular.module('Robot', [
      'ngMaterial', 'ngWebSocket', 'chart.js',
      'components', 'directives', 'services'
    ]);

    app.controller('AppController', function ($scope, $gapidSelection) {
      var tabKeys = ['Tracks', 'Subjects', 'Satellites'];
      $gapidSelection.onselect(function (view) {
        $scope.selectedTab = Math.max(tabKeys.indexOf(view), 0);
      });
      $scope.$watch('selectedTab', function (index) {
        if (index !== undefined) {
          $gapidSelection.select(tabKeys[index]);
        }
      });
    });
  </script></body>
</html>
